<template>
  <div>
    <p>方法：{{ getFullName() }}</p>
    <p>计算属性：{{ fullName }}</p>
    <button @click="count++">增加</button>
    <button @click="firstName = 'Spike'">修改 firstName</button>
    <p>count: {{ count }}</p>
    <p>firstName: {{ firstName }}</p>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
const firstName = ref('Tom')
const lastName = ref('Jerry')
const count = ref(0)

function getFullName() {
  console.log('方法执行')
  return firstName.value + ' ' + lastName.value
}

const fullName = computed(() => {
  console.log('计算属性执行')
  return firstName.value + ' ' + lastName.value
})
</script>
